<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0005_画一个圆带结束线帽</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(300, 300, 100, -(Math.PI / 180) * 90, (Math.PI / 180) * 270, false); // false 顺时针 true 是逆时针
  ctx.strokeStyle = '#dddddd';
  ctx.lineWidth = 80; // 这个lineWidth 一半在园内  一般在圆外
  ctx.lineCap = 'round';
  ctx.stroke(); // 通过填充路径绘制实心图形
  ctx.closePath();

  console.log(canvas.getBoundingClientRect().left)

  // 以canvas左上角为原点屏幕坐标系，鼠标点击的坐标位置
  function getX (ev) {
    return ev.clientX - canvas.getBoundingClientRect().left
  }

  function getY (ev) {
  return ev.clientY - canvas.getBoundingClientRect().top
  }

var isDown = false
  function OnMouseDown(evt){
    var X=getX(evt);    //获取当前鼠标位置横坐标
    var Y=getY(evt);     //获取当前鼠标位置纵坐标
    // 距圆心的距离
    var dis = Math.pow(Math.pow(X - 300, 2) + Math.pow(Y - 300, 2), 0.5)
    console.log(X, Y, dis)
    var isDown = (dis >= 60) && (dis <= 140)
    console.log(isDown) // 判断鼠标是否在圆环上
    // var minX=this.p.x-this.p.r;  
    // var maxX=this.p.x+this.p.r;
    // var minY=this.p.y-this.p.r;
    // var maxY=this.p.y+this.p.r;
    //  if(minX<X && X<maxX && minY<Y && Y<maxY){   //判断鼠标是否在滑块上 
    //      this.p.isDown=true;      
    //  }else{
    //       this.p.isDown=false;
    //  }
}

function onMouseMove () {
  console.log('dddd')
}
  function addEvent () {
    canvas.addEventListener("mousedown", OnMouseDown.bind(canvas))
    canvas.addEventListener("mousemove", onMouseMove.bind(canvas))
  }
  addEvent()
  // 以canvas中心点，为原心的坐标系
   function spotchange (a){ //屏幕坐标转化为中心坐标 200 200 是canvas中心点坐标
    var target={};
    if(a.x<200 && a.y<200){　　　　　　//二象限
        target.x=-(200-a.x); 
        target.y=200-a.y; 
    }else if(a.x>200 && a.y<200){　　//一象限  
        target.x=a.x-200; 
        target.y=200-a.y; 
    }else if(a.x>200 && a.y>200){　　//四象限
        target.x=a.x-200;
        target.y=-(a.y-200) 
    }else if(a.x<200 && a.y>200){　　//三象限
        target.x=-(200-a.x); 
        target.y=-(a.y-200); 
    } 
    return target; 
}

// 中心坐标（红色坐标）->屏幕坐标（黑色坐标）

function respotchange(a){ //中心坐标转化为屏幕坐标
    var target={};
    if(a.x>0 && a.y>0){
      target.x=200+a.x;
      target.y=(200-a.y);
    }else if(a.x<0 && a.y>0){
      target.x=200+a.x;
      target.y=200-a.y;
    }else if(a.x<0 && a.y<0){
      target.x=200+a.x;
      target.y=-(a.y-200)
    }else if(a.x>0 && a.y<0){
      target.x=200+a.x;
      target.y=-(a.y-200);
    }
    return target;
  }

function getmoveto(lx, ly, R){
      // if(!this.p.isDown){    //是否可移动
      //   return false;
      // }
      this.pathr = R // 圆的半径

      var tem={};    //存放目标坐标位置
      tem.o=Math.atan(ly/lx); //鼠标移动点圆形角
      tem.x=this.pathr*Math.cos(tem.o);
      tem.y=this.pathr*Math.sin(tem.o);
      if(lx<0){ //坐标点处理（正负）
        tem.x=-tem.x;
        tem.y=-tem.y;
      }
     if(lx>0){  //弧度值处理
      tem.z=-Math.atan(tem.y/tem.x)+Math.PI*2;
     }else{
      tem.z=-Math.atan(tem.y/tem.x)+Math.PI;
     }
     if(tem.z>7.06){  //最大值
      tem.z=7.06;
      tem.x=this.pathr*Math.cos(Math.PI*2.25);
      tem.y=-this.pathr*Math.sin(Math.PI*2.25);
     }
     if(tem.z<2.4){ //最小值
      tem.z=2.4;
      tem.x=this.pathr*Math.cos(Math.PI*0.75);
      tem.y=-this.pathr*Math.sin(Math.PI*0.75);
     }
    return tem;
   }



</script>
</html>